[V0_FILE]typescriptreact:file="app/page.tsx" 'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' import Hero from '@/components/hero' import DataSphere from '@/components/data-sphere' import HolographicCube from '@/components/holographic-cube' import Navigation from '@/components/navigation' import Partners from '@/components/partners' export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" 'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' export default function Hero() { const canvasRef = useRef(null) const mouseRef = useRef({ x: 0, y: 0 }) useEffect(() => { if (!canvasRef.current) return // Scene setup const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) camera.position.z = 5 const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, alpha: true, antialias: true, }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // Create shattered box geometry const boxGroup = new THREE.Group() // Main cube pieces (shattering effect) const pieces: THREE.Mesh[] = [] const pieceSize = 0.4 const gap = 0.05 for (let x = -1; x <= 1; x++) { for (let y = -1; y <= 1; y++) { for (let z = -1; z <= 1; z++) { const geometry = new THREE.BoxGeometry(pieceSize, pieceSize, pieceSize) const material = new THREE.MeshStandardMaterial({ color: 0x000000, emissive: 0x111111, metalness: 0.9, roughness: 0.1, }) const piece = new THREE.Mesh(geometry, material) piece.position.set( x * (pieceSize + gap), y * (pieceSize + gap), z * (pieceSize + gap) ) piece.userData.originalPosition = piece.position.clone() piece.userData.offset = { x, y, z } pieces.push(piece) boxGroup.add(piece) } } } // Inner glowing particles const particlesGeometry = new THREE.BufferGeometry() const particleCount = 1000 const positions = new Float32Array(particleCount * 3) const colors = new Float32Array(particleCount * 3) for (let i = 0; i < particleCount; i++) { // Position particles in a sphere const radius = Math.random() * 1.5 const theta = Math.random() * Math.PI * 2 const phi = Math.random() * Math.PI positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta) positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta) positions[i * 3 + 2] = radius * Math.cos(phi) // Random neon colors (orange, green, cyan) const colorChoice = Math.random() if (colorChoice < 0.33) { // Orange colors[i * 3] = 1 colors[i * 3 + 1] = 0.42 colors[i * 3 + 2] = 0.21 } else if (colorChoice < 0.66) { // Green colors[i * 3] = 0 colors[i * 3 + 1] = 1 colors[i * 3 + 2] = 0.62 } else { // Cyan colors[i * 3] = 0 colors[i * 3 + 1] = 0.85 colors[i * 3 + 2] = 1 } } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)) const particlesMaterial = new THREE.PointsMaterial({ size: 0.05, vertexColors: true, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, }) const particles = new THREE.Points(particlesGeometry, particlesMaterial) boxGroup.add(particles) // Wireframe structure inside const wireframeGeometry = new THREE.IcosahedronGeometry(1.2, 0) const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff9f, wireframe: true, transparent: true, opacity: 0.3, }) const wireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial) boxGroup.add(wireframe) scene.add(boxGroup) // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) const pointLight1 = new THREE.PointLight(0xff6b35, 2, 100) pointLight1.position.set(5, 5, 5) scene.add(pointLight1) const pointLight2 = new THREE.PointLight(0x00ff9f, 2, 100) pointLight2.position.set(-5, -5, 5) scene.add(pointLight2) // Mouse move handler const handleMouseMove = (event: MouseEvent) => { mouseRef.current.x = (event.clientX / window.innerWidth) * 2 - 1 mouseRef.current.y = -(event.clientY / window.innerHeight) * 2 + 1 } window.addEventListener('mousemove', handleMouseMove) // Resize handler const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener('resize', handleResize) // Animation let time = 0 const animate = () => { requestAnimationFrame(animate) time += 0.01 // Shatter animation - pieces move outward and back const shatterAmount = Math.sin(time * 0.5) * 0.5 + 0.5 pieces.forEach((piece) => { const offset = piece.userData.offset const distance = shatterAmount * 0.8 piece.position.x = piece.userData.originalPosition.x + offset.x * distance piece.position.y = piece.userData.originalPosition.y + offset.y * distance piece.position.z = piece.userData.originalPosition.z + offset.z * distance piece.rotation.x += 0.001 * offset.x piece.rotation.y += 0.001 * offset.y }) // Rotate entire box group boxGroup.rotation.y += 0.002 boxGroup.rotation.x = Math.sin(time * 0.2) * 0.1 // Mouse interaction boxGroup.position.x += (mouseRef.current.x * 0.5 - boxGroup.position.x) * 0.05 boxGroup.position.y += (mouseRef.current.y * 0.5 - boxGroup.position.y) * 0.05 // Animate particles const particlePositions = particles.geometry.attributes.position.array as Float32Array for (let i = 0; i < particleCount; i++) { const i3 = i * 3 particlePositions[i3] += Math.sin(time + i) * 0.001 particlePositions[i3 + 1] += Math.cos(time + i) * 0.001 } particles.geometry.attributes.position.needsUpdate = true particles.rotation.y += 0.001 // Animate wireframe wireframe.rotation.x += 0.003 wireframe.rotation.y += 0.002 renderer.render(scene, camera) } animate() // Cleanup return () => { window.removeEventListener('mousemove', handleMouseMove) window.removeEventListener('resize', handleResize) renderer.dispose() } }, []) return (

) } [V0_FILE]typescriptreact:file="components/data-sphere.tsx" 'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' export default function DataSphere() { const canvasRef = useRef(null) const sectionRef = useRef(null) useEffect(() => { if (!canvasRef.current || !sectionRef.current) return const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) camera.position.z = 8 const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, alpha: true, antialias: true, }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // Create wireframe sphere const sphereGeometry = new THREE.SphereGeometry(3, 32, 32) const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00d9ff, wireframe: true, transparent: true, opacity: 0.6, }) const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial) scene.add(sphere) // Add inner rotating rings (gyroscope effect) const ring1Geometry = new THREE.TorusGeometry(2.5, 0.02, 16, 100) const ring1Material = new THREE.MeshBasicMaterial({ color: 0xff6b35, transparent: true, opacity: 0.8, }) const ring1 = new THREE.Mesh(ring1Geometry, ring1Material) ring1.rotation.x = Math.PI / 2 scene.add(ring1) const ring2 = ring1.clone() ring2.material = new THREE.MeshBasicMaterial({ color: 0x00ff9f, transparent: true, opacity: 0.8, }) ring2.rotation.y = Math.PI / 3 scene.add(ring2) const ring3 = ring1.clone() ring3.material = new THREE.MeshBasicMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.8, }) ring3.rotation.z = Math.PI / 4 scene.add(ring3) // Add glowing particles around sphere const particlesGeometry = new THREE.BufferGeometry() const particleCount = 500 const positions = new Float32Array(particleCount * 3) for (let i = 0; i < particleCount; i++) { const radius = 3.5 + Math.random() * 1 const theta = Math.random() * Math.PI * 2 const phi = Math.random() * Math.PI positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta) positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta) positions[i * 3 + 2] = radius * Math.cos(phi) } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) const particlesMaterial = new THREE.PointsMaterial({ color: 0x00d9ff, size: 0.05, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, }) const particles = new THREE.Points(particlesGeometry, particlesMaterial) scene.add(particles) // Resize handler const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener('resize', handleResize) // Animation let scrollProgress = 0 const animate = () => { requestAnimationFrame(animate) // Calculate scroll progress for this section if (sectionRef.current) { const rect = sectionRef.current.getBoundingClientRect() const sectionTop = rect.top const sectionHeight = rect.height scrollProgress = Math.max(0, Math.min(1, 1 - sectionTop / sectionHeight)) } // Animate based on scroll sphere.rotation.y += 0.001 sphere.rotation.x += 0.0005 ring1.rotation.z += 0.01 ring2.rotation.x += 0.008 ring3.rotation.y += 0.012 particles.rotation.y -= 0.0005 // Scale based on scroll progress const scale = 0.5 + scrollProgress * 0.5 sphere.scale.set(scale, scale, scale) ring1.scale.set(scale, scale, scale) ring2.scale.set(scale, scale, scale) ring3.scale.set(scale, scale, scale) renderer.render(scene, camera) } animate() return () => { window.removeEventListener('resize', handleResize) renderer.dispose() } }, []) return (

) } [V0_FILE]typescriptreact:file="components/holographic-cube.tsx" 'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' export default function HolographicCube() { const canvasRef = useRef(null) const sectionRef = useRef(null) useEffect(() => { if (!canvasRef.current || !sectionRef.current) return const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) camera.position.z = 6 const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, alpha: true, antialias: true, }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // Create holographic cube const cubeGroup = new THREE.Group() // Outer cube wireframe const outerCubeGeometry = new THREE.BoxGeometry(3, 3, 3) const outerCubeMaterial = new THREE.MeshBasicMaterial({ color: 0x1e90ff, wireframe: true, transparent: true, opacity: 0.4, }) const outerCube = new THREE.Mesh(outerCubeGeometry, outerCubeMaterial) cubeGroup.add(outerCube) // Inner wireframe structures const innerGeometry1 = new THREE.OctahedronGeometry(1.5, 0) const innerMaterial1 = new THREE.MeshBasicMaterial({ color: 0x00ff9f, wireframe: true, transparent: true, opacity: 0.6, }) const innerShape1 = new THREE.Mesh(innerGeometry1, innerMaterial1) cubeGroup.add(innerShape1) const innerGeometry2 = new THREE.IcosahedronGeometry(1.2, 0) const innerMaterial2 = new THREE.MeshBasicMaterial({ color: 0x00d9ff, wireframe: true, transparent: true, opacity: 0.5, }) const innerShape2 = new THREE.Mesh(innerGeometry2, innerMaterial2) cubeGroup.add(innerShape2) // Glowing edges const edgesGeometry = new THREE.EdgesGeometry(outerCubeGeometry) const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.8, }) const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial) cubeGroup.add(edges) // Particle field inside cube const particlesGeometry = new THREE.BufferGeometry() const particleCount = 800 const positions = new Float32Array(particleCount * 3) const colors = new Float32Array(particleCount * 3) for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 2.5 positions[i * 3 + 1] = (Math.random() - 0.5) * 2.5 positions[i * 3 + 2] = (Math.random() - 0.5) * 2.5 // Blue-green gradient const t = Math.random() colors[i * 3] = 0 colors[i * 3 + 1] = 0.5 + t * 0.5 colors[i * 3 + 2] = 1 - t * 0.4 } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)) const particlesMaterial = new THREE.PointsMaterial({ size: 0.03, vertexColors: true, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending, }) const particles = new THREE.Points(particlesGeometry, particlesMaterial) cubeGroup.add(particles) scene.add(cubeGroup) // Resize handler const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener('resize', handleResize) // Animation let time = 0 let scrollProgress = 0 const animate = () => { requestAnimationFrame(animate) time += 0.01 // Calculate scroll progress if (sectionRef.current) { const rect = sectionRef.current.getBoundingClientRect() const sectionTop = rect.top const sectionHeight = rect.height scrollProgress = Math.max(0, Math.min(1, 1 - sectionTop / sectionHeight)) } // Breathing effect const breathScale = 1 + Math.sin(time * 0.5) * 0.05 cubeGroup.scale.set(breathScale, breathScale, breathScale) // Pulsing opacity const pulseOpacity = 0.6 + Math.sin(time * 0.8) * 0.2 ;(outerCubeMaterial as THREE.MeshBasicMaterial).opacity = pulseOpacity * 0.4 ;(innerMaterial1 as THREE.MeshBasicMaterial).opacity = pulseOpacity * 0.6 ;(innerMaterial2 as THREE.MeshBasicMaterial).opacity = pulseOpacity * 0.5 // Rotation cubeGroup.rotation.y += 0.003 cubeGroup.rotation.x += 0.002 innerShape1.rotation.x += 0.005 innerShape1.rotation.y -= 0.007 innerShape2.rotation.z += 0.004 innerShape2.rotation.x -= 0.003 // Particle animation const particlePositions = particles.geometry.attributes.position.array as Float32Array for (let i = 0; i < particleCount; i++) { const i3 = i * 3 particlePositions[i3 + 1] += Math.sin(time + i * 0.1) * 0.002 } particles.geometry.attributes.position.needsUpdate = true // Scale based on scroll const scale = 0.5 + scrollProgress * 0.5 const finalScale = scale * breathScale cubeGroup.scale.set(finalScale, finalScale, finalScale) renderer.render(scene, camera) } animate() return () => { window.removeEventListener('resize', handleResize) renderer.dispose() } }, []) return (

) } [V0_FILE]typescriptreact:file="components/navigation.tsx" 'use client' export default function Navigation() { const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: 'smooth' }) } } return (

) } [V0_FILE]typescriptreact:file="components/partners.tsx" export default function Partners() { const partners = [ 'VERCEL', 'OPENAI', 'MICROSOFT', 'TESLA', 'NVIDIA', 'SPACEX', ] return (

CONTACT

Ready to explore the infinite?

Get in Touch

Trusted Partners

{partners.map((partner) => (

{partner}

))}

) } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @theme inline { --font-sans: system-ui, -apple-system, sans-serif; /* Black background theme with neon accents */ --color-background: #000000; --color-foreground: #ffffff; --color-primary: #00d9ff; --color-primary-foreground: #000000; --color-secondary: #00ff9f; --color-secondary-foreground: #000000; --color-accent: #ff6b35; --color-accent-foreground: #ffffff; --color-muted: #1a1a1a; --color-muted-foreground: #a0a0a0; --color-card: #0a0a0a; --color-card-foreground: #ffffff; --color-border: rgba(255, 255, 255, 0.1); --color-input: rgba(255, 255, 255, 0.1); --color-ring: #00d9ff; --radius: 0rem; } body { margin: 0; padding: 0; overflow-x: hidden; background: #000000; color: #ffffff; } html { scroll-behavior: smooth; } * { box-sizing: border-box; } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "three": "0.181.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }

Jackywine Design Studio

INSIDE

APPLIED

CONTACT

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This